<template>
	<div class="leave-a-message-box">
		<!--我是留言组件-->
		<header>
			{{commentNum}} 条评论
			<div class="icon-cha" @click="emitParentAnimate()">
				<Iconfont iconClass="iconfont iconcha cha" />
			</div>			
		</header>
		<div class="connect-box" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
			<div class="no-comment" v-if="isNoComment">
				暂无评论，还不赶快抢沙发~
			</div>
			<ul class="connect-box-ul" >
				<li class="connect-box-li" v-for="(v,index) in commentListArray" :key="v.id">
					<div class="nick-name-box">
						<div class="nick-name">
							{{v.nick}}
						</div>
					</div>
					<div class="author-text">{{v.msg}}</div>
					<div class="author-info">
						<span class="time">{{v.ut}}</span>
						<div class="delete-box" v-if="v.acct==$store.state.userInfo.un" @click="deleteVideoComment(v)"></div>
						<div class="mess-btn" @click="clickMessBtn(v)"></div>						
						<div :class="v.userGoods==false?'zan':'zan-color'" @click="clickZan(v.id,v.userGoods,index)"></div>
						<p class="num">{{v.goods}}</p>
					</div>
					<div class="childen-box" v-if="v.res.length>0">
						<ul>
							<li v-for="w in  v.res"  @click="clickSrcondLi(v,w)">
								<template v-if="w.toNick">
									{{w.nick}} 回复 {{w.toNick}}:{{w.msg}}
									<div class="delete-box1"  v-if="w.acct==$store.state.userInfo.un" @click.stop="deletePL(w)"></div>
								</template>
								<template v-else>
									{{w.nick}}:{{w.msg}}
									<div class="delete-box1" v-if="w.acct==$store.state.userInfo.un" @click.stop="deletePL(w)"></div>
								</template>								
							</li>
							<li>
								
							</li>
						</ul>
						<p class="bottom-tip"  pageNum='1'    @click="moreCommentRe(v,$event)" v-if="v.res.length>9">展开更多10条回复<Iconfont iconClass="iconfont iconsanjian-close arrow" /></p>
					</div>
				</li>
				<p class="footer-tip">{{tipText}}</p>
			</ul>
		</div>
		<footer>
		    <p class="zzhf" v-if="isZZHF">正在回复<span>{{zzhfText}}</span></p>
		    <div :class="btnSend" @click.stop="sendMsg" ></div>
			<input ref="bottomInput"  type="text" v-model="message" placeholder="写个友善的评论吧~" />
			<div class="input-write"></div>
		</footer>
	</div>
</template>

<script>
	// import fun from '../../util/function.js';
	export default{
		props: {
		commentNum: String,//传过来的评论总数
		cmtAutoCheck:Boolean,//是否需要审核留言需要不需要审核    true 是不需要审核  false 是要审核
		},
		components:{
		},
		data(){
			return{
				isZZHF:false,//正在回复box
				message: '', //输入框消息
				btnSend: 'air-box',
				commentListArray:[],//评论列表数组
				zzhfText:'',//正在回复名字
				clickCommentId:'',//点击评论的id
				toAcct:'',//被回复的账号
				toNick:'',//被回复的昵称
				page:1,//当前页数
				busy: false, //打开滚动
				isVideoComment:true,//开关 默认是视频评论    false是回复评论
				isNoComment:false,//没有留言提示信息
				tipText:'',//没有更多
			}
		},
		watch: {
			message() {
				if(!this.message) {
					this.btnSend = "air-box"
				} else {
					this.btnSend = "air-box-violet"
				}
			}
		},
		created() {
			this.getCommentList();//获取评论列表
		},
		mounted() {},
		methods: {
			loadMore: function() {
				let _this = this;
				_this.busy = true;				
				setTimeout(() => {
					_this.page++;
					_this.getCommentList();
				}, 200);

			},
			moreCommentRe(v,e){
				let pageNum = e.target.getAttribute("pageNum")
				    pageNum++ 
			        e.target.setAttribute("pageNum",pageNum++ )
				  let startId = v.res[v.res.length-1].id;
				  let cmtId = v.id;				
				  this.getNextPage(startId,cmtId,e.target.getAttribute("pageNum"),v);
			},
			getNextPage(startId,cmtId,page,v){
				this.$http.get("/svideo/getCmtRes?startId="+startId+"&cmtId="+cmtId+"&page="+page+"&pageSize=10")
					.then(res => {
						if(res.data.code == "000000") {
                            this.commentListArray.map((item,index)=>{
                            	if(item.id==v.id){
                            	  this.commentListArray[index].res = [...this.commentListArray[index].res,...res.data.data]
                            	}
                            })
						} else {}
					})
					.catch(response => {
						console.log(response);
					});
			},
			deleteVideoComment(v){//删除视频 评论
						//  if(this.$store.state.isYk) {//游客		 
						// 		// fun.goLogin(location.href);
						// 		fun.toastMessage('请先登录',1500);
						// 		return;
                        // }
			
			   this.$http.get("/svideo/delXsComment?cmtId="+v.id+"&resId=")
					.then(res => {
						if(res.data.code == "000000") {
                            fun.toastMessage('留言删除成功',1500);
                            this.page =1;
							this.commentListArray = [];
							this.busy = false;
							this.getCommentList();
						} else {}
					})
					.catch(response => {
						console.log(response);
					});
				
			},
			deletePL(w){//删除评论				 
				 this.$http.get("/svideo/delXsComment?cmtId="+w.cmtId+"&resId="+w.id)
					.then(res => {
						if(res.data.code == "000000") {
                            fun.toastMessage('留言删除成功',1500)
                            this.page =1;
							this.commentListArray = [];
							this.busy = false;
							this.getCommentList();
						} else {}
					})
					.catch(response => {
						console.log(response);
					});
			},
			getCommentList(){//获取当前视频评论
				this.$http.get("/svideo/getSvComment?id="+this.$route.query.id+"&page="+this.page+"&pageSize=10")
					.then(res => {
							if(res.data.code === '000000') {
								if(res.data.data.length) { //防止后端给null
                                     this.commentListArray= [...this.commentListArray,...res.data.data];
                                     this.busy = false;
									if(res.data.data.length < 10) {
										this.busy = true; //禁用
										this.tipText = "暂时没有更多了 "
									}else{
									}
								}
								   if(!this.commentListArray.length){
                                     	this.isNoComment = true;
                                   }
							}
					})
					.catch(response => {
						console.log(response);
					});
			},
			clickZan(id,userGoods,index){//点赞
				this.$http.get("/svideo/svCmtGoods?id="+id)
					.then(res => {
							if(res.data.code === '000000') {
								if(res.data.data) {
									this.commentListArray[index].userGoods = !this.commentListArray[index].userGoods;									
									if(res.data.data.userGoods){
										this.commentListArray[index].goods ++
									}else{
										this.commentListArray[index].goods --
									}
								}
							}else{
								console.log('接口报错')
							}
					})
					.catch(response => {
						console.log(response);
					});	
			},
			sendMsg(){
				// if(this.$store.state.isYk) {
		        //     if(window.terminal.hwQuickApp){
				// 	    fun.toastMessage('暂未开放')					
				// 	}else{
				// 		// fun.goLogin(location.href)
				// 		fun.toastMessage('请先登录',1500);
				// 	}
		        //     return
		        // }
				if(this.isVideoComment){
					this.sendFooterMsg();
				}else{
					this.sendCommentMsg()
				}				
			},
			sendCommentMsg(){
				
				if(this.message.length=='0'){
					return
				}
				if(this.message.length>140){
					fun.toastMessage('已超出最大字数限制',1500);
					return;
			    }
				let params = {
					'acct': this.$store.state.userInfo.un,
					'cmtId':this.clickCommentId,//白色的评论
					'msg': this.message,//评论的消息
					'nick':this.$store.state.userInfo.nickname,
					'toAcct':this.toAcct,//被回复的账号
					'toNick':this.toNick,//被回复的昵称
					'vid':this.$route.query.id,//视频video
               }
				this.isVideoComment = true;
				this.isZZHF = false;
				this.$http.post('/svideo/repSvComment', JSON.stringify(params),{
						headers: {
							"Content-Type": "application/json"
						}
				}).then( 
					res => {
						if(this.cmtAutoCheck){//true 是不需要审核
								this.page =1;
								this.commentListArray = [];
								this.busy = false;
								this.getCommentList();								
							}else{
								fun.toastMessage('您的评论正在审核中，请耐心等待...',1500)
							}
					},
					err => {
						console.log("接口错误")
					}
				)
				this.message = '';
			},
			sendFooterMsg(){//点击回复视频评论
			// 	if(this.$store.state.isYk) {//游客
            //     //   fun.goLogin(location.href);
			// 	fun.toastMessage('请先登录',1500);
            //       return;
            //   }
				if(this.message.length=='0'){
					return
				}
				if(this.message.length>140){
					fun.toastMessage('已超出最大字数限制',1500);
					return;
			    }
				let params = {
					'acct': this.$store.state.userInfo.un,
					'msg': this.message,
					'nick':this.$store.state.userInfo.nickname,
					'vid':this.$route.query.id,
					'type':this.$route.query.type ? '2':'1'
                }
                //  原来接口/svideo/addSvComment
				this.$http.post('/svideo/addVideoComment', JSON.stringify(params),{
						headers: {
							"Content-Type": "application/json"
						}
				}).then( 
					res => {
						if(res.data.code == "000000") {
							if(this.cmtAutoCheck){//true 是不需要审核
								this.page =1;
								this.commentListArray = [];
								this.busy = false;
								this.getCommentList();								
							}else{
								fun.toastMessage('您的评论正在审核中，请耐心等待...',1500)
							}
							
						}
					},
					err => {
						console.log("接口错误")
					}
				)
				this.message = '';
			},
		  clickMessBtn(v){//点击回复  参数回复的昵称
		  
			//    if(this.$store.state.isYk) {//游客
            //     //   fun.goLogin(location.href);
			// 	fun.toastMessage('请先登录',1500);
            //       return;
            //   }

          	this.toAcct = '',//被回复的账号
			this.toNick='',//被回复的昵称
          	this.isVideoComment = false
          	this.clickCommentId = v.id;//回复评论的id
            this.zzhfText = v.nick;//回复的昵称
          	this.isZZHF = true;
          	this.$refs.bottomInput.focus()
          },
          clickSrcondLi(v,w){//点击二级评论的回复
          	this.toAcct = w.acct,//被回复的账号
			this.toNick=w.nick//被回复的昵称
          	this.isVideoComment = false;
			this.clickCommentId = v.id;//回复评论的id
            this.zzhfText = w.nick;//回复的昵称
          	this.isZZHF = true;
          	this.$refs.bottomInput.focus()
			},
          emitParentAnimate(){//关闭模态框
          	this.$emit('slideDown',{
          		'type':'slideDown'
          	})
          }
		},
	}
</script>

<style scoped="scoped">
	.footer-tip{
		color: #818288;
		width: 710px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		clear: both;
		font-size: 26px;
		background: white;
	}
	footer input{
		padding-right: 100px;
	}
	.delete-box{
		width: 35px;
		height: 35px;
		background: url(../../assets/images/zhxyk/delete-pic.png) no-repeat;
		background-size:35px 35px ;
		margin-right: 67px;
	}
	.delete-box1{
		width: 40px;
		height: 35px;
		background: url(../../assets/images/zhxyk/delete-pic.png) no-repeat;
		background-size:35px 35px ;
		display: inline-block;
		margin-left: 20px;
		margin-right: 10px;
		/*margin-top: 10px;*/
	}
	.no-comment{
		width: 100vw;
		height: 600px;
		/*background: pink;*/
		line-height: 600px;
		text-align: center;
		font-size:26px;
		color:rgba(129,130,136,1);
	}
	.air-box {
		width: 88px;
		height: 108px;
		position: absolute;
		bottom: 0px;
		right: 30px;
		z-index: 10;
		background: url('../../assets/images/zhxyk/airplane-gray.png') no-repeat center center;
		background-size: 35px 35px;
		/*background: pink;*/
	}
	
	.air-box-violet {
		width: 88px;
		height: 108px;
		/*	background: pink;*/
		position: absolute;
		bottom: 0px;
		right: 30px;
		z-index: 10;
		background: url(../../assets/images/zhxyk/airplane-violet.png) no-repeat center center;
		background-size: 35px 35px;
		/*background: pink;*/
	}
	.zzhf{
		width: 100vw;
		height: 60px;
		line-height: 60px;
		font-size:26px;
		font-weight:500;
		color:rgba(153,153,153,1);
		background: white;
		padding-left: 40px;
		border-top: 2px solid #F3F3F3;
	}
	.bottom-tip{
		width: 600px;
		font-size:24px;
		font-weight:300;
		color:rgba(61,87,141,1);
		line-height:30px;
		padding-left: 25px;
	}
	.childen-box{
	    width:710px;
        background:rgba(247,247,247,1);
		border-radius:4px;
		padding: 18px 0;
	}
	.childen-box li{
		 width:680px;
		font-size: 26px;
		line-height: 45px;
		padding: 0 30px 0 25px;
		/*background: pink;*/
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.num{
		font-size:20px;
		font-weight:400;
		color:rgba(127,127,127,1);
		width: 90px;
	/*	background: pink;*/
		text-align: center;
	}
	.zan{
		width: 35px;
		height: 35px;
		background: url(../../assets/images/zhxyk/appreciate_icon.png) no-repeat;
		background-size: 35px  35px;
	}
	.zan-color{
		width: 35px;
		height: 35px;
		background: url(../../assets/images/zhxyk/appreciate_icon2.png) no-repeat;
		background-size: 35px  35px;
	}
	.time{
		font-size:24px;
		color:rgba(153,153,153,1);
		flex: 6;
	}
	.author-info{
		height: 40px;
		width: 710px;
		display: flex;
		/*background: pink;*/
		align-items: center;
		margin-top: 10px;
	}
	.mess-btn{
		width: 35px;
		height: 35px;
		background: url(../../assets/images/zhxyk/mes-gray-pic.png) no-repeat;
		background-size: 35px  35px;
		flex: 1;
		margin-right: 10px;
	}
	.author-text{
		width: 710px;
		color: #666666;
		line-height: 38px;
		font-size: 26px;
		margin-top: 10px;
	}
	.nick-name-box{
		width: 710px;
		height: 36px;
		/*background: darkgray;*/
		display: flex;
		align-items: center;
	}
	.author{
		width:75px;
		height:37px;
		background:linear-gradient(180deg,rgba(255,182,88,1),rgba(238,135,0,1));
		border-radius:7.5px;
		color: white;
		font-size: 27px;
		line-height: 37px;
		text-align: center;
		transform: scale(0.66);
	}
	.nick-name{
		color: #3D578D;
		font-size: 28px;
		font-weight: 500;
	}
	.leave-a-message-box{
		width: 100vw;
		height: 1019px;
		position: relative;
		bottom: 0;
		left: 0;
		z-index: 20;
		border-radius: 10px 10px 0 0;
		background: white;
	}
	header{
		width: 100vw;
		height: 80px;
		/*background: white;*/
		text-align: center;
		font-size:26px;
		font-weight:500;
		color:rgba(0,0,0,1);
		line-height: 80px;
		border-bottom: 1px solid #F3F3F3;
	}
	.icon-cha{
		width: 100px;
		height: 80px;
		position: absolute;
		top: 0;
		right: 0;
	}
	.leave-a-message-box .icon-cha i.cha{
		color: #666666;
		font-size: 22px;
	}
	.connect-box{
		width: 750px;
		height:831px;
		/*background: honeydew;*/
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.connect-box .connect-box-ul{
		width: 750px;
		padding: 0 20px 60px 20px;
	}
	.connect-box ul .connect-box-li{
	/*	padding: 0 30px;*/
	border-bottom: 2px solid #F3F3F3;
	margin-top: 25px;
	padding-bottom: 20px;
	}
	footer{
		width: 100vw;
		/*height: 88px;*/
		/*background: chartreuse;*/
		border-top: 2px solid #F3F3F3;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	footer input{
		width: 100%;
		height: 108px;
		line-height: 40px;
		padding-left: 88px;		
	}
	.input-write{
		width: 88px;
		height: 108px;
		background: url(../../assets/images/zhxyk/input-write.png) no-repeat center center;
		background-size: 35px 35px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.arrow{
		font-size: 28px;
		display: inline-block;
		transform: rotate(90deg);
		margin-top: 5px;
		color: #3D578D;
	}
</style>